<template>
  <div class="EmployeeDetails">
    <!-- 头部 -->
    <div class="Title">
      <div class="blue"></div>
      <span class="title">员工详情</span>
      <el-button
        class="right-box"
        type="info"
        icon="el-icon-back"
        onclick="window.history.go(-1)"
      >返回</el-button>
    </div>

    <div class="employeeDetails">
      <div class="employee_up">
        <p class="Headline">基本信息</p>
        <div :v-model="form">
          <div class="empNumber">
            <span class="yuangong">员工工号</span>
            <el-input class="wb" v-model="form.empno"></el-input>
          </div>
          <div class="empNumber">
            <span class="yuangong">员工名称</span>
            <el-input class="wb" v-model="form.empname"></el-input>
          </div>
          <div class="empNumber">
            <span class="yuangong">性别</span>
            <el-input class="wb" v-model="form.sex"></el-input>
          </div>
          <div class="empNumber">
            <span class="yuangong">年龄</span>
            <el-input class="wb" v-model="form.age"></el-input>
          </div>
          <div class="empNumber">
            <span class="yuangong">联系方式</span>
            <el-input class="wb" v-model="form.phone"></el-input>
          </div>
          <div class="empNumber">
            <span class="yuangong">工作年限</span>
            <el-input class="wb" v-model="form.workyear"></el-input>
          </div>
          <div class="empNumber">
            <span class="yuangong">工作状态</span>
            <el-input class="wb" v-model="form.state"></el-input>
          </div>
        </div>
      </div>
      <div class="employee_down">
        <div class="down_left">
          <p class="Headline">员工信息</p>
          <div class="empAll">
            <div class="emplPhone">
              <div class="emplPhone_left">
                <p class="empp">员工头像</p>
                <div class="phone">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="head" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
              <div class="emplPhone_right">
                <div class="department">
                  <span class="yuangong">所属部门</span>
                  <el-input class="deparInput" v-model="form.departno"></el-input>
                </div>
                <div class="department">
                  <span>职务</span>
                  <el-input class="deparInput" v-model="form.positionno"></el-input>
                </div>
                <div class="department">
                  <span>工作岗位</span>
                  <el-input class="deparInput"></el-input>
                </div>
                <div class="department">
                  <span>紧急联系人</span>
                  <el-input class="deparInput" v-model="form.warnpeople"></el-input>
                </div>
                <div class="department">
                  <span>关系</span>
                  <el-input class="deparInput" v-model="form.warnrel"></el-input>
                </div>
                <div class="department">
                  <span>联系方式</span>
                  <el-input class="deparInput" v-model="form.warnphone"></el-input>
                </div>
              </div>
            </div>
            <div class="emplPhone_low">
              <div class="id_Number">
                <p class="empp">身份证号</p>
                <el-input class="id_input" v-model="form.IDcard"></el-input>
              </div>
              <div class="id_Number">
                <p class="empp">居住地址</p>
                <el-input class="id_input" v-model="form.nowaddress"></el-input>
              </div>
              <div class="id_Number">
                <p class="empp">身份证正面照</p>
                <div class="phone">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="positivepath" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
              <div class="id_Number">
                <p class="empp">身份证背面照</p>
                <div class="phone">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="reversepath" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="down_right">
          <div class="right_Up">
            <p class="Headline">工资信息</p>
            <div class="department">
              <span>收入总额（元）</span>
              <el-input class="deparInput"></el-input>
            </div>
            <div class="department">
              <span>上月收入（元）</span>
              <el-input class="deparInput"></el-input>
            </div>
            <div class="department">
              <span>冻结资金（元）</span>
              <el-input class="deparInput"></el-input>
            </div>
          </div>
          <div class="right_low">
            <p class="Headline">劳动合同及保密协议</p>
            <div class="timepicker">
              <div class="block">
                <span class="demonstration">签订日期至到期日期</span>
                <el-date-picker
                  v-model="contractstarton"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
              <div class="phone">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="hetongpic" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="right_down">
            <el-input type="textarea" :rows="2" placeholder="评价内容" v-model="remark"></el-input>
          </div>
        </div>
      </div>
      <div class="empphone_Btn">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item>
            <!-- <el-button type="primary" @click="onSubmit">确认</el-button> -->
            <el-button type="info" onclick="window.history.go(-1)">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- <div></div> -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      imageUrl: "",
      textarea: "",
      form: {},
      value1: "",
      Detail: "",
      form: {
        empno: "HY001",
        empname: "admin",
        sex: false,
        age: null,
        phone: "18251830942",
        workyear: -2709,
        states: null,
        head: "/UpImage/20200319142531.png",
        departno: "007",
        positionno: "001",
        warnpeople: null,
        warnrel: null,
        warnphone: "0",
        IDcard: null,
        nowaddress: "sdfsd",
        positivepath: null,
        reversepath: null,
        contractstarton: "/Date(1583424000000)/",
        contractendon: "/Date(1583164800000)/",
        hetongpic: null,
        remark: null
      }
    };
  },
  created() {
    this.Detail = this.$route.query.name;
    console.log(this.Detail);
    this.geiApply();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 数据渲染
    geiApply() {
      axios(
        "/apis/ProductionManagement.asmx/Det?index=3&jsondata=" + this.Detail
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        console.log("详情");
        console.log(datas);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.form = list.sour[0];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.EmployeeDetails {
  width: 99%;
}
.Title {
  width: 99%;
  height: 35px;
  margin-top: 10px;
}
.blue {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  margin-left: 20px;
  margin-top: 5px;
  float: left;
}
.title {
  margin-left: 10px;
  line-height: 35px;
}
.employeeDetails {
  width: 99%;
  height: 100%;
  margin-left: 15px;
  margin-top: 10px;
  //   border: 1px solid #000;
}
.employee_up {
  width: 99.5%;
  // height: 25%;
  background-color: $white;
  border: 1px solid $linecolor;
  // border: 1px solid #000;
}
.employee_down {
  width: 99.5%;
  // height: 90%;
  margin-top: 20px;
}
.Headline {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  color: $fontcolor;
  padding-left: 15px;
  border-bottom: 1px solid $linecolor;
}
.down_left {
  width: 45.5%;
  height: 99%;
  background-color: $white;
  border: 1px solid $linecolor;
  display: inline-block;
}
.down_right {
  width: 53%;
  height: 99%;
  //   background-color: $white;
  // border: 1px solid $linecolor;
  float: right;
}
.empNumber {
  width: 14%;
  height: 50px;
  margin-top: 20px;
  margin-left: 15px;
  // border: 1px solid #000;
  display: inline-block;
  min-width: 165px;
  //   max-width:165px;
}
.yuangong {
  line-height: center;
  font-size: 14px;
  // border: 1px solid #000;
}
.wb {
  width: 60%;
  // float: right;
  // border: 1px solid #000;
}
.emplPhone {
  width: 99%;
  height: 40%;
  //   border: 1px solid #000;
}
.emplPhone_left {
  width: 32%;
  height: 99%;
  margin-top: 10px;
  // border: 1px solid #000;
  display: inline-block;
}
.emplPhone_right {
  width: 64%;
  height: 99%;
  // border: 1px solid #000;
  float: right;
  margin-top: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.phone {
  width: 150px;
  height: 150px;
  margin-left: 15px;
  margin-top: 10px;
  border: 1px solid $linecolor;
}
.empp {
  padding-left: 15px;
  font-size: 14px;
  // border: 1px solid #000;
}
.department {
  width: 29%;
  height: 80px;
  margin-top: 20px;
  margin-left: 10px;
  // border: 1px solid #000;
  display: inline-block;
}
.deparInput {
  // width: 55%;
  float: right;
  margin-top: 5px;
  // border: 1px solid #000;
}
.emplPhone_low {
  width: 99%;
  height: 53%;
  margin-top: 20px;
}
.empAll {
  width: 99%;
  height: 90%;
  //   border: 1px solid #000;
}
.id_Number {
  width: 48%;
  //   height: 100px;
  //   border: 1px solid #000;
  display: inline-block;
  margin-top: 10px;
}
.id_input {
  width: 98%;
  margin-top: 10px;
  margin-left: 5px;
}
.right_Up {
  width: 99%;
  height: 30%;
  background-color: $white;
  border: 1px solid $linecolor;
  // border: 1px solid #000;
}
.right_low {
  width: 99%;
  height: 47%;
  background-color: $white;
  border: 1px solid $linecolor;
  margin-top: 15px;
}
.timepicker {
  width: 99%;
  //   height: 80px;
  margin-left: 20px;
  color: $fontcolor;
  line-height: 80px;
  //   border: 1px solid #000;
}
.block {
  margin-top: 10px;
  // margin-left: 48%;
  cursor: pointer;
  //   border: 1px solid #000;
}
.block_Math {
  cursor: pointer;
}
.right_down {
  width: 99%;
  height: 15.5%;
  margin-top: 15px;
  border: 1px solid $linecolor;
  background-color: $white;
}
.empphone_Btn {
  width: 99%;
  height: 100px;
  margin-top: 30px;
  text-align: center;
  // border: 1px solid #000;
}
.right-box {
  float: right;
  margin-right: 2%;
  border-radius: 5px;
}
</style>